<template>
  <div class="mid-autumn-wrap">
    <!-- 转动的月亮 -->
    <div class="img-wrap">
      <img class="an img" src="./img.webp" width="350" height="350"/>
    </div>
    <!-- 拨动 -->
    <div class="line-wrap">
      <img class="an line" src="./ball.png" width="200" height="150"/>
    </div>
    <!-- 文字 -->
    <div class="title-wrap">
      中秋
    </div>
    <!-- 喜欢、下载、评论、留言 -->
    <div class="action-wrap-1">
      <img class="an line" src="./image/love.png" width="50" height="50"/>
      <img class="an line" src="./image/download.png" width="35" height="35"/>
      <img class="an line" src="./image/message.png" width="35" height="35"/>
      <img class="an line" src="./image/comment.png" width="40" height="40"/>
    </div>
    <!-- 进度 -->
    <div class="process-wrap">
      <div>{{ begin }}</div>
      <div class="all">
        <div class="current" :style="{'width':`${currentWidth}%`}"></div>
      </div>
      <div>{{ end }}</div>
    </div>
    <!-- 循环、上下曲、播放、列表 -->
    <div class="action-wrap-2">
      <img class="an line" src="./image/loop.png" width="35" height="35"/>
      <img class="an line" src="./image/pre.png" width="35" height="35"/>
      <img class="an line" src="./image/ing.png" width="40" height="40"/>
      <img class="an line" src="./image/next.png" width="35" height="35"/>
      <img class="an line" src="./image/list.png" width="40" height="40"/>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentWidth: 0,
      timer: '',
      begin: '00:00',
      end: '03:54',
      stop: false
    }
  },
  methods: {
    ing () {
      const beginArr = this.begin.split(':')
      const endArr = this.end.split(':')
      // 增加1s
      if (Number(beginArr[1]) < 60) {
        // 秒 < 59
        beginArr[1] = Number(beginArr[1]) + 1
        if (beginArr[1] < 10) {
          beginArr[1] = '0' + beginArr[1]
        }
      } else {
        // 秒 > 60
        beginArr[1] = '00'
        beginArr[0] = Number(beginArr[0]) + 1
        // 小于10s 补0
        if (beginArr[0] < 10) {
          beginArr[0] = '0' + beginArr[0]
        }
      }
      this.begin = beginArr.join(':')
      // 计算进度条%
      const beginNum = Number(beginArr[0] * 60) + Number(beginArr[1])
      const endNum = Number(endArr[0] * 60) + Number(endArr[1])
      this.currentWidth = (beginNum / endNum) * 100
      if (this.currentWidth === 100) {
        this.begin = '00:00'
      }
    }
  },

  mounted () {
    this.timer = setInterval(() => {
      this.ing()
    }, 1000)
  }
}
</script>

<style lang="less">
.mid-autumn-wrap {
  position: relative;
  width: 497px;
  height: 883px;
  padding: 80px 20px;
  background-color: rgb(42, 47, 92, 0.5)
}
.img-wrap{
  text-align: center;
  @-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
  }
  .an{
    -webkit-animation: rotation 3.5s linear infinite;
  }
  .img{border-radius: 250px;}
}

.line-wrap {
  position: absolute;
  top: 60px;
  left: 60px;

  /*拨针摇摆动画*/
  @-webkit-keyframes rabbit{
    25% {-webkit-transform: rotate(10deg);}
    50% {-webkit-transform: rotate(20deg);}
    75% {-webkit-transform: rotate(10deg);}
    100% {-webkit-transform: rotate(0deg);}
  }
  .an{
    transform-origin: top left;
    -webkit-animation: rabbit 3s linear infinite;
  }
}

.title-wrap {
  position: absolute;
  top: 60px;
  right: 60px;
  width: 25px;
  color: #fff;
  font-size: 55px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.action-wrap-1 {
  position: absolute;
  bottom: 300px;
  left: 15%;
  width: 70%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.action-wrap-2 {
  position: absolute;
  bottom: 200px;
  left: 15%;
  width: 70%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.process-wrap {
  position: absolute;
  bottom: 250px;
  left: 10%;
  width: 80%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  .all {
    width: 65%;
    height: 2px;
    background-color: rgb(73, 71, 71);
  }
  .current {
    height: 2px;
    background-color: rgb(124, 121, 121);
  }
}

</style>
